<script setup>
import {reactive, ref} from "vue";
import router from "../routers/router.js";
import instance from "../until/request.js";
import {defineUser} from "../store/userStore.js";

let SysUser=defineUser()
let loginUser =reactive({
  username:"",
  password:""
})
let usernameMsg =ref("")
let userPwdMsg =ref("")
function checkUsername(){
  let usernameReg= /^[a-zA-Z0-9]{5,10}$/
  if(!usernameReg.test(loginUser.username)){
    usernameMsg.value="格式有误"
    return false
  }
  usernameMsg.value="OK"
  return true
}
function checkUserPwd(){
  let userPwdReg = /^[0-9]{6}$/
  if(!userPwdReg.test(loginUser.password)){
    userPwdMsg.value="格式有误"
    return false
  }
  userPwdMsg.value="OK"
  return true }
async function login(){
  // 表单数据格式都正确再提交
  let flag1 =checkUsername()
  let flag2 =checkUserPwd()
  if(!(flag1 && flag2)){
    return
  }
  let {data} = await instance.post("user/login",loginUser)
  if(data.code == 200 ){
    alert("登录成功")
    //保存用户信息
    SysUser.username=data.data.username
     SysUser.uid=data.data.uid
    // 跳转到showSchedule
    await router.push("/showSchedule")
  } else if( data.code == 503){
    alert("密码有误")
  }else if (data.code == 501 ){
    alert("用户名有误")
  }else {
    alert("未知错误")
  }

}
</script>

<template>
  <div class="container">
    <div id="loginForm">
      <h2>用户登录</h2>

        <div class="form-group">
          <label for="loginUsername">用户名:</label>
          <input type="text" id="loginUsername" name="username" v-model="loginUser.username" @blur="checkUsername" required>
          <span>{{usernameMsg}}</span>
        </div>

        <div class="form-group">
          <label for="loginPassword">密码:</label>
          <input type="password" id="loginPassword" name="password" v-model="loginUser.password" @blur="checkUserPwd" required>
          <span>{{userPwdMsg}}</span>
        </div>
        <div id="UserPasswordMsg"></div>
        <button type="submit" @click="login">登录</button>

      <div class="switch-form">
        没有账户?
        <router-link to="/register">去注册</router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px;
  margin: 0 auto;
}

h2 {
  text-align: center;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #333;
}

input[type="text"], input[type="password"] {
  width: 90%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

.switch-form {
  text-align: center;
  margin-top: 15px;
}

.switch-form a {
  color: #007bff;
  text-decoration: none;
}

.switch-form a:hover {
  text-decoration: underline;
}
</style>